.swiper-container {
    max-width: 640px;
    min-width: 300px;
    height: 100%;
}

/* 第一屏 begin */
.swiper-slide-1 {
    background: url("../images/back.jpg") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
}
.swiper-slide-1 .music {
    position: relative;
    bottom: -.5rem;
    right: 0rem;
    z-index: 1;
    width: 3.8rem;
    height: 3rem;
    background-image: url('../images/k5.0.png');
    background-repeat: no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    -webkit-animation: communal-rotate 6s linear infinite;
    animation: communal-rotate 6s linear infinite;
}
.swiper-slide-1 .music-swap {
    background-image: url('../images/k5.png');
}
.swiper-slide-1 .no-1 {
    position: relative;
    top: 2rem;
    left: 0rem;
}
.swiper-slide-1 .entirety-1 {
    position: relative;
    top: -6rem;
    left: 0rem;
}
.swiper-slide-1 .centre-windmill {
    position: absolute;
    left: 50%;
    top: 7rem;
    margin-left: -7rem;
    width: 12rem;
    -webkit-animation: communal-rotate 2s linear infinite;
    animation: communal-rotate 2s linear infinite;;
}
.swiper-slide-1 .secto {
    position: absolute;
    left: 50%;
    top: 5.5rem;
    margin-left: -5.5rem;
    width: 10rem;
    -webkit-animation: secto 5s linear infinite;
    animation: secto 5s linear infinite;
}
.swiper-slide-1 .self {
    position: absolute;
    top: 7rem;
    left: 50%;
    margin-left: -4rem;
    width: 7rem;
    border-radius: 50%;
    z-index: 1;
}
.swiper-slide-1 .side {
    position: absolute;
    top: 4.6rem;
    left: 50%;
    margin-left: -5.5rem;
    width: 10rem;
    -webkit-animation: side 5s linear infinite;
    animation: side 5s linear infinite;
}
.swiper-slide-1 .sighting {
    position: absolute;
    top: 5.6rem;
    left: 50%;
    margin-left: -5.5rem;
    width: 10rem;
    -webkit-animation: side 3s linear infinite;
    animation: side 3s linear infinite;
}
.swiper-slide-1 .site {
    position: absolute;
    top: 8rem;
    right: 20%;
}
.swiper-slide-1 .site p {
    position: relative;
    top: 0rem;
    right: -2.5rem;
    color: #fff;
    font:  1rem '微软雅黑';
}
.swiper-slide-1 .site img {
    width: 5rem;
}
.swiper-slide-1 .age {
    position: absolute;
    top: 7rem;
    right: 60%;
}
.swiper-slide-1 .age p {
    position: relative;
    top: 0rem;
    right: -.5rem;
    color: #fff;
    font:  1rem '微软雅黑';
}
.swiper-slide-1 .age img {
    width: 5rem;
}
.swiper-slide-1 .rank {
    position: absolute;
    top: 11rem;
    right: 60%;
}
.swiper-slide-1 .rank p {
    position: relative;
    top: 0rem;
    right: -.5rem;
    color: #fff;
    font:  1rem '微软雅黑';
}
.swiper-slide-1 .rank img {
    width: 5rem;
}

/* 文字介绍模块动画 begin */
.swiper-slide-1 .synopsis {
    position: relative;
    top: 11rem;
    left: 50%;
    margin-left: -4.5rem;
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
}
.swiper-slide-1.curr .synopsis {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}
.swiper-slide-1 .synopsis .monicker {
    position: absolute;
    top: 0rem;
    left: -12rem;
}
.swiper-slide-1 .synopsis .major {
    position: absolute;
    top: 1rem;
    left: 17rem;
}
.swiper-slide-1 .synopsis .phone {
    position: absolute;
    top: 2rem;
    left: -17rem;
}
.swiper-slide-1.curr .synopsis .monicker {
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
    left: 3rem;
}
.swiper-slide-1.curr .synopsis .major {
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
    left: 1rem;
}
.swiper-slide-1.curr .synopsis .phone {
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
    left: 0rem;
}
.swiper-slide-1 .synopsis p {
    color: #85D4DA;
    font-size: 1rem;
    text-shadow: 1.5px 1px 2px;
}
/* 文字介绍模块动画 end */

/* 奔跑模块动画 begin */
.swiper-slide-1 .rush {
    position: relative;
    top: 16rem;
    -webkit-transition: all 1s ease-in 1s;
    transition: all .5s ease-in 1s;
}
.swiper-slide-1.curr .rush {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
}
.swiper-slide-1 .rush-1 {
    position: relative;
    top: 0rem;
    left: 25rem;
}
.swiper-slide-1.curr .rush-1 {
    -webkit-transition: all 1s ease-in;
    transition: all 1s ease-in;
    left: 3rem;
}
.swiper-slide-1 .rush .bp {
    width: 5rem;
    float: left;
}
.swiper-slide-1 .rush .yf {
    width: 9.5rem;
    float: left;
}
.swiper-slide-1 .rush .lg {
    width: 100%;
    position: absolute;
    top: 3.5rem;
    left: 0rem;
}
.swiper-slide-1 .rush p {
    position: absolute;
    top: 4.5rem;
    left: -11rem;
    color: #85D4DA;
    font-size: 1rem;
    text-shadow: 1.5px 1px 2px;
}
.swiper-slide-1.curr .rush p {
    -webkit-transition: all 1s ease-in;
    transition: all 1s ease-in;
    left: 7rem;
}
/* 奔跑模块动画 end */
/* 第一屏 end */

/* 第二屏 begin */
.swiper-slide-2 {
    background: url("../images/back.jpg") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
}
.swiper-slide-2 .ball img {
    width: 20%;
    float: left;
    margin: 4%;
    -webkit-animation: communal-rotate 1s linear infinite;
    animation: communal-rotate 1s linear infinite;
}
.swiper-slide-2 .zgb {
    position: absolute;
    top: 2%;
    left: 100%;
    width: 70%;
}
.swiper-slide-2.curr .zgb {
    -webkit-animation: inching-1 2s linear 1;
    animation: inching-1 2s linear 1;
    -webkit-transition: left 2s linear;
    transition: left 2s linear;
    left: 15%;
}
.swiper-slide-2 .no-1 {
    position: absolute;
    top: 13%;
    left: -75%;
    perspective: 30px;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
}
.swiper-slide-2.curr .no-1 {
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
    left: 5%;
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
}
.swiper-slide-2 .no-1 .pic13 {
    position: absolute;
    top: 6%;
    width: 45%;
    -webkit-animation: inching-2 3s linear infinite;
    animation: inching-2 3s linear infinite;
}
.swiper-slide-2 .no-1 .scrn1 {
    width: 55%;
}
.swiper-slide-2 .no-1 .ECG {
    position: absolute;
    top: 35%;
    left: 2%;
    width: 52%;
    z-index: 1;
}
.swiper-slide-2.curr .no-1 .ECG-1 {
    -webkit-animation: rotateX 2s linear infinite;
    animation: rotateX 2s linear infinite;
}
.swiper-slide-2 .no-1 .ball {
    position: absolute;
    top: 96%;
    left: 6%;
}
.swiper-slide-2 .no-2 {
    position: absolute;
    top: 50%;
    left: 100%;
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: rotateZ(90deg);
    transform: rotateZ(90deg);
}
.swiper-slide-2.curr .no-2 {
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
    left: 20%;
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
}
.swiper-slide-2 .no-2 .ball {
    position: absolute;
    top: -14%;
    left: 33%;
}
.swiper-slide-2 .no-2 .pic15 {
    position: absolute;
    left: -10%;
    width: 44%;
    -webkit-animation: inching-3 3s linear infinite;
    animation: inching-3 3s linear infinite;
}
.swiper-slide-2 .no-2 .scrn2 {
    width: 75%;
}
.swiper-slide-2 .no-2 video {
    position: absolute;
    top: 2rem;
    left: .5rem;
    width: 68%;
}
.swiper-slide-2 .no-2 .play {
    position: absolute;
    top: 35%;
    left: 35%;
    width: 15%;
}
/* 第二屏 end */

/* 第三屏 begin */
.swiper-slide-3 {
    background: url("../images/back.jpg") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    overflow: hidden;
    position: relative;
}
.swiper-slide-3 .pic17 {
    position: absolute;
    top: 3%;
    left: 20%;
    perspective: 100px;
}
.swiper-slide-3 .pic17 img {
    width: 70%;
}
.swiper-slide-3.curr .pic17 img {
    -webkit-transition: all 1s linear;
    transition: all 1s linear;
    -webkit-transform: rotateY(360deg);
    transform: rotateY(360deg);
}
.swiper-slide-3 .skill {
    position: relative;
    top: 18%;
    left: -40%;
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.swiper-slide-3.curr .skill {
    -webkit-transition: all .5s linear;
    transition: all .5s linear;
    left: 0%;
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
}
.swiper-slide-3 .skill .pic18 {
    width: 30%;
}
.swiper-slide-3 .jquery {
    position: absolute;
    top: 20%;
    left: 100%;
}
.swiper-slide-3.curr .jquery {
    -webkit-transition: all .5s linear .1s;
    transition: all .5s linear .1s;
    left: -6%;
}
.swiper-slide-3 .jquery .pic19 {
    width: 35%;
    position: relative;
    top: -1.5rem;
    left: 60%;
}
.swiper-slide-3 .jquery .pic20 {
    width: 90%;
    position: absolute;
    top: -50%;
    left: 54%;
}
.swiper-slide-3 .jquery .pic21 {
    width: 25%;
    position: absolute;
    top: -78%;
    left: 144%;
}
.swiper-slide-3 .javascript {
    position: absolute;
    top: 32%;
    left: 100%;
}
.swiper-slide-3.curr .javascript {
    -webkit-transition: all .5s linear .2s;
    transition: all .5s linear .2s;
    left: -15%;
}
.swiper-slide-3 .javascript .pic22 {
    width: 35%;
    position: relative;
    top: -1.5rem;
    left: 60%;
}
.swiper-slide-3 .javascript .pic23 {
    width: 68%;
    position: absolute;
    top: -50%;
    left: 54%;
}
.swiper-slide-3 .javascript .pic24 {
    width: 20%;
    position: absolute;
    top: -90%;
    left: 121%;
}
.swiper-slide-3 .htmlCss {
    position: absolute;
    top: 46%;
    left: 100%;
}
.swiper-slide-3.curr .htmlCss {
    -webkit-transition: all .5s linear .3s;
    transition: all .5s linear .3s;
    left: -10%;
}
.swiper-slide-3 .htmlCss .pic25 {
    width: 35%;
    position: relative;
    top: -1.5rem;
    left: 60%;
}
.swiper-slide-3 .htmlCss .pic26 {
    width: 68%;
    position: absolute;
    top: -50%;
    left: 54%;
}
.swiper-slide-3 .htmlCss .pic27 {
    width: 20%;
    position: absolute;
    top: -90%;
    left: 121%;
}
.swiper-slide-3 .bootstrap {
    position: absolute;
    top: 57.5%;
    left: 100%;
}
.swiper-slide-3.curr .bootstrap {
    -webkit-transition: all .5s linear .4s;
    transition: all .5s linear .4s;
    left: -13%;
}
.swiper-slide-3 .bootstrap .pic28 {
    width: 35%;
    position: relative;
    top: -1.5rem;
    left: 60%;
}
.swiper-slide-3 .bootstrap .pic29 {
    width: 62%;
    position: absolute;
    top: -50%;
    left: 54%;
}
.swiper-slide-3 .bootstrap .pic30 {
    width: 20%;
    position: absolute;
    top: -90%;
    left: 114%;
}
.swiper-slide-3 .ajax {
    position: absolute;
    top: 70%;
    left: 100%;
}
.swiper-slide-3.curr .ajax {
    -webkit-transition: all .5s linear .5s;
    transition: all .5s linear .5s;
    left: 9%;
}
.swiper-slide-3 .ajax .pic31 {
    width: 35%;
    position: relative;
    top: -1.5rem;
    left: 60%;
}
.swiper-slide-3 .ajax .pic32 {
    width: 100%;
    position: absolute;
    top: -50%;
    left: 54%;
}
.swiper-slide-3 .ajax .pic36 {
    width: 40%;
    position: absolute;
    top: -120%;
    left: 155%;
}
.swiper-slide-3 .angularjs {
    position: absolute;
    top: 82%;
    left: 100%;
}
.swiper-slide-3.curr .angularjs {
    -webkit-transition: all .5s linear .6s;
    transition: all .5s linear .6s;
    left: -10%;
}
.swiper-slide-3 .angularjs .pic33 {
    width: 35%;
    position: relative;
    top: -1.5rem;
    left: 60%;
}
.swiper-slide-3 .angularjs .pic34 {
    width: 70%;
    position: absolute;
    top: -50%;
    left: 54%;
}
.swiper-slide-3 .angularjs .pic35 {
    width: 22%;
    position: absolute;
    top: -88%;
    left: 122%;
}
/* 第三屏 end */

/* 第四屏 begin */
.swiper-slide-4 {
    background: url("../images/back.jpg") no-repeat;
    -webkit-background-size: 100% 100%;
    background-size: 100% 100%;
    overflow: hidden;
}
/* 第四屏 end */